<template>
  <div class="q-pa-md">
    <q-select v-model="selection" :options="selectOpts"></q-select>
    <q-btn @click="btnClick">aaa</q-btn>
    <div style="color:green">
      {{ selection }}|{{ selected }}
      <div style="background-color:red">dataGrid1?.selected:{{ dataGrid1?.selected }}</div>
      <div style="background-color:yellow">dataGrid1?.selectedRow:{{ dataGrid1?.selectedRow }}</div>
      <div style="background-color:red">dataGrid1?.selectedRows:{{ dataGrid1?.selectedRows }}</div>
    </div>

    <t-data-grid ref="dataGrid1" :selection="selection" title="Treats" :rows="rows" v-model:columnsFilter="columnsFilter"
      :optColumns="optColumns" :row-key="rowKey" :loading="loading" height="300px"
      v-model:pagination="pagination" @request="onRequest" :columnLinkFormat="columnLinkFormat"></t-data-grid>

  </div>
</template>

<script>
import options from './options';

import { onMounted, ref } from 'vue';
export default {
  setup() {
    const rows = ref([]);

    const pagination = ref({
      // sortBy: 'desc',
      // descending: false,
      page: 1,
      rowsPerPage: 3,
      rowsNumber: 2001,
    });

    const loading = ref(false);

    const selection = ref('none');

    function onRequest(props) {
      debugger;
      const { page, rowsPerPage, sortBy, descending } = props.pagination;
      const filter = props.filter;

      loading.value = true;

      setTimeout(() => {
        fetchFromServer(props.pagination, props.filter);
      }, 1500);

    }

    function fetchFromServer(_pagination, filter) {
      const { page, rowsPerPage, sortBy, descending, rowsNumber } =
        _pagination;
      const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage;

      // calculate starting row of data
      const startRow = (page - 1) * rowsPerPage;

      fetch(
        `http://localhost:3004/users?_start=${startRow}&_limit=${fetchCount}`,
      ).then(response => {
        response.json().then(movies => {
          // rows.value = movies;
          // clear out existing data and add new
          rows.value.splice(0, rows.value.length, ...movies);

          // don't forget to update local pagination object
          pagination.value.rowsNumber = 2001;
          pagination.value.page = page;
          pagination.value.rowsPerPage = rowsPerPage;
          pagination.value.sortBy = sortBy;
          pagination.value.descending = descending;

          loading.value = false;
        });
      });
    }

    // const dataGrid1 = ref();
    // const dataGrid2 = ref();
    let Widget = {};
    onMounted(() => {
      Widget.dataGrid1 = vm.dataGrid1.value;
      fetchFromServer(pagination.value, '');
    });

     let vm = {
      columnLinkFormat: field => {
        debugger;
        console.log(field, Widget.dataGrid1.cellClickInfo.data[field]);
        // alert(Widget.dataGrid1.cellClickInfo.data[field]);
      },
      dataGrid1: ref(),
      pagination: pagination,
      selection: selection,
      selected: ref([]),
      rowKey: options.idField,
      columnsFilter: ref(true),
      selectOpts: ['none', 'multiple', 'single'],
      optColumns: options.columns,
      // ...useOpts({ optColumns: options.columns }).value, // columns,visibleColumns
      rows,
      loading,
      onRequest,
      btnClick(){
        debugger;
        console.log(Widget.dataGrid1.selected)
        console.log(Widget.dataGrid1.selectedRows)
        console.log(Widget.dataGrid1.selectedRow)
        console.log(Widget.dataGrid1.rows)
      }
    };
    return vm;
  },
};
</script>
